<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="JavaScript image viewer.">
  <meta name="author" content="Chen Fengyuan">
  <title>Viewer.js</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" crossorigin="anonymous">
  <link rel="stylesheet" href="css/viewer.css">
  <link rel="stylesheet" href="css/main.css">
</head>
<body>
  <!--[if lt IE 9]>
  <div class="alert alert-warning alert-dismissible fade show m-0 rounded-0" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
    You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience.
  </div>
  <![endif]-->

  <!-- Header -->
  <header class="navbar navbar-light navbar-expand-md">
    <div class="container">
      <a class="navbar-brand" href="./">Viewer.js</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-controls="navbar-collapse" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse justify-content-end" id="navbar-collapse" role="navigation">
        <ul class="nav navbar-nav">
          <li class="nav-item">
            <a class="nav-link" href="https://github.com/fengyuanchen/viewerjs/blob/master/README.md" data-toggle="tooltip" title="View the documentation">Docs</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Examples
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
              <a class="dropdown-item" href="examples/custom-title.html">Custom title</a>
              <a class="dropdown-item" href="examples/custom-toolbar.html">Custom toolbar</a>
              <a class="dropdown-item" href="examples/dynamic-viewer.html">Dynamic Viewer</a>
              <a class="dropdown-item" href="examples/viewer-in-modal.html">Viewer in modal</a>
            </div>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="https://github.com/fengyuanchen/viewerjs" data-toggle="tooltip" title="View the GitHub project">GitHub</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="https://fengyuanchen.github.io/" data-toggle="tooltip" title="Explore more projects">Explore</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="https://chenfengyuan.com/" data-toggle="tooltip" title="About the author">About</a>
          </li>
        </ul>
      </div>
    </div>
  </header>

  <!-- Jumbotron -->
  <div class="jumbotron bg-primary text-white rounded-0">
    <div class="container">
      <div class="row">
        <div class="col-md">
          <h1>Viewer.js <small class="h6">v1.5.0</small></h1>
          <p class="lead">JavaScript image viewer.</p>
        </div>
        <div class="col-md">
          <div class="carbonads">
            <script id="_carbonads_js" src="https://cdn.carbonads.com/carbon.js?serve=CKYI55Q7&placement=fengyuanchengithubio" async></script>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Content -->
  <div class="container">
    <h1>Overview</h1>
    <hr>
    <div class="row">
      <div class="col-sm-12 col-md-3">
        <h3>Options</h3>
        <hr>
        <div class="docs-toggles">
          <div class="btn-group d-flex" data-toggle="buttons" role="group">
            <label class="btn btn-primary active">
              <input type="radio" class="sr-only" name="inline" data-value="false" autocomplete="off" checked> Modal mode
            </label>
            <label class="btn btn-primary">
              <input type="radio" class="sr-only" name="inline" data-value="true" autocomplete="off"> Inline mode
            </label>
          </div>
          <button class="btn btn-primary btn-block mb-3 d-md-none" id="toggle-options" data-target="#options" data-toggle="collapse" aria-expanded="true">Toggle options</button>
          <div class="docs-collapse collapse d-md-block mb-3" id="options" aria-labelledby="toggle-options">
            <ul class="list-group">
              <li class="list-group-item">
                <div class="form-check">
                  <input class="form-check-input" id="backdrop" type="checkbox" name="backdrop" checked>
                  <label for="backdrop" class="form-check-label">backdrop</label>
                </div>
              </li>
              <li class="list-group-item">
                <div class="form-check">
                  <input class="form-check-input" id="button" type="checkbox" name="button" checked>
                  <label for="button" class="form-check-label">button</label>
                </div>
              </li>
              <li class="list-group-item">
                <div class="form-check">
                  <input class="form-check-input" id="fullscreen" type="checkbox" name="fullscreen" checked>
                  <label for="fullscreen" class="form-check-label">fullscreen</label>
                </div>
              </li>
              <li class="list-group-item">
                <div class="form-check">
                  <input class="form-check-input" id="loading" type="checkbox" name="loading" checked>
                  <label for="loading" class="form-check-label">loading</label>
                </div>
              </li>
              <li class="list-group-item">
                <div class="form-check">
                  <input class="form-check-input" id="loop" type="checkbox" name="loop" checked>
                  <label for="loop" class="form-check-label">loop</label>
                </div>
              </li>
              <li class="list-group-item">
                <div class="form-check">
                  <input class="form-check-input" id="keyboard" type="checkbox" name="keyboard" checked>
                  <label for="keyboard" class="form-check-label">keyboard</label>
                </div>
              </li>
              <li class="list-group-item">
                <div class="form-check">
                  <input class="form-check-input" id="movable" type="checkbox" name="movable" checked>
                  <label for="movable" class="form-check-label">movable</label>
                </div>
              </li>
              <li class="list-group-item">
                <div class="form-check">
                  <input class="form-check-input" id="navbar" type="checkbox" name="navbar" checked>
                  <label for="navbar" class="form-check-label">navbar</label>
                </div>
              </li>
              <li class="list-group-item">
                <div class="form-check">
                  <input class="form-check-input" id="rotatable" type="checkbox" name="rotatable" checked>
                  <label for="rotatable" class="form-check-label">rotatable</label>
                </div>
              </li>
              <li class="list-group-item">
                <div class="form-check">
                  <input class="form-check-input" id="scalable" type="checkbox" name="scalable" checked>
                  <label for="scalable" class="form-check-label">scalable</label>
                </div>
              </li>
              <li class="list-group-item">
                <div class="form-check">
                  <input class="form-check-input" id="slideOnTouch" type="checkbox" name="slideOnTouch" checked>
                  <label for="slideOnTouch" class="form-check-label">slideOnTouch</label>
                </div>
              </li>
              <li class="list-group-item">
                <div class="form-check">
                  <input class="form-check-input" id="title" type="checkbox" name="title" checked>
                  <label for="title" class="form-check-label">title</label>
                </div>
              </li>
              <li class="list-group-item">
                <div class="form-check">
                  <input class="form-check-input" id="toggleOnDblclick" type="checkbox" name="toggleOnDblclick" checked>
                  <label for="toggleOnDblclick" class="form-check-label">toggleOnDblclick</label>
                </div>
              </li>
              <li class="list-group-item">
                <div class="form-check">
                  <input class="form-check-input" id="toolbar" type="checkbox" name="toolbar" checked>
                  <label for="toolbar" class="form-check-label">toolbar</label>
                </div>
              </li>
              <li class="list-group-item">
                <div class="form-check">
                  <input class="form-check-input" id="tooltip" type="checkbox" name="tooltip" checked>
                  <label for="tooltip" class="form-check-label">tooltip</label>
                </div>
              </li>
              <li class="list-group-item">
                <div class="form-check">
                  <input class="form-check-input" id="transition" type="checkbox" name="transition" checked>
                  <label for="transition" class="form-check-label">transition</label>
                </div>
              </li>
              <li class="list-group-item">
                <div class="form-check">
                  <input class="form-check-input" id="zoomable" type="checkbox" name="zoomable" checked>
                  <label for="zoomable" class="form-check-label">zoomable</label>
                </div>
              </li>
              <li class="list-group-item">
                <div class="form-check">
                  <input class="form-check-input" id="zoomOnTouch" type="checkbox" name="zoomOnTouch" checked>
                  <label for="zoomOnTouch" class="form-check-label">zoomOnTouch</label>
                </div>
              </li>
              <li class="list-group-item">
                <div class="form-check">
                  <input class="form-check-input" id="zoomOnWheel" type="checkbox" name="zoomOnWheel" checked>
                  <label for="zoomOnWheel" class="form-check-label">zoomOnWheel</label>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="col-sm-8 col-md-6">
        <h3>Demo</h3>
        <hr>
        <div class="docs-galley mb-3">
          <ul class="docs-pictures clearfix">
            <li><img data-original="images/tibet-1.jpg" src="images/thumbnails/tibet-1.jpg" alt="Cuo Na Lake"></li>
            <li><img data-original="images/tibet-2.jpg" src="images/thumbnails/tibet-2.jpg" alt="Tibetan Plateau"></li>
            <li><img data-original="images/tibet-3.jpg" src="images/thumbnails/tibet-3.jpg" alt="Jokhang Temple"></li>
            <li><img data-original="images/tibet-4.jpg" src="images/thumbnails/tibet-4.jpg" alt="Potala Palace 1"></li>
            <li><img data-original="images/tibet-5.jpg" src="images/thumbnails/tibet-5.jpg" alt="Potala Palace 2"></li>
            <li><img data-original="images/tibet-6.jpg" src="images/thumbnails/tibet-6.jpg" alt="Potala Palace 3"></li>
            <li><img data-original="images/tibet-7.jpg" src="images/thumbnails/tibet-7.jpg" alt="Lhasa River"></li>
            <li><img data-original="images/tibet-8.jpg" src="images/thumbnails/tibet-8.jpg" alt="Namtso 1"></li>
            <li><img data-original="images/tibet-9.jpg" src="images/thumbnails/tibet-9.jpg" alt="Namtso 2"></li>
          </ul>
        </div>
      </div>
      <div class="col-sm-4 col-md-3">
        <h3>Methods</h3>
        <hr>
        <div class="docs-buttons" role="group">
          <div class="input-group">
            <span class="input-group-prepend">
              <button type="button" class="btn btn-primary" data-method="view" data-target="#viewIndex" title="View one of the images with image's index">View</button>
            </span>
            <input type="text" class="form-control" id="viewIndex" name="index" value="4" placeholder="index">
          </div>
          <div class="input-group">
            <span class="input-group-prepend">
              <button type="button" class="btn btn-primary" data-enable="inline" data-method="zoom" data-target="#zoomRatio" title="Zoom the image">Zoom</button>
            </span>
            <input type="text" class="form-control" id="zoomRatio" name="ratio" value="0.5" placeholder="ratio">
          </div>
          <div class="input-group">
            <span class="input-group-prepend">
              <button type="button" class="btn btn-primary" data-enable="inline" data-method="zoomTo" data-target="#zoomToRatio" title="Zoom the image to a special ratio">Zoom To</button>
            </span>
            <input type="text" class="form-control" id="zoomToRatio" name="ratio" value="1" placeholder="ratio">
          </div>
          <div class="input-group">
            <span class="input-group-prepend">
              <button type="button" class="btn btn-primary" data-enable="inline" data-method="rotate" data-target="#rotateDegrees" title="Rotate the image">Rotate</button>
            </span>
            <input type="text" class="form-control" id="rotateDegrees" name="degrees" value="90" placeholder="degrees">
          </div>
          <div class="input-group">
            <span class="input-group-prepend">
              <button type="button" class="btn btn-primary" data-enable="inline" data-method="rotateTo" data-target="#rotateToDegrees" title="Rotate the image to a special angle">Rotate To</button>
            </span>
            <input type="text" class="form-control" id="rotateToDegrees" name="degrees" value="360" placeholder="degrees">
          </div>
          <div class="btn-group d-flex" role="group">
            <button type="button" class="btn btn-primary" data-arguments="[0.5]" data-enable="inline" data-method="zoom" title="Zoom in">Zoom In</button>
            <button type="button" class="btn btn-primary" data-arguments="[-0.5]" data-enable="inline" data-method="zoom" title="Zoom out">Zoom out</button>
          </div>
          <div class="btn-group d-flex" role="group">
            <button type="button" class="btn btn-primary" data-arguments="[-90]" data-enable="inline" data-method="rotate" title="Rotate left">Rotate Left</button>
            <button type="button" class="btn btn-primary" data-arguments="[90]" data-enable="inline" data-method="rotate" title="Rotate right">Rotate Right</button>
          </div>
          <div class="btn-group d-flex" role="group">
            <button type="button" class="btn btn-primary" data-arguments="[-1]" data-enable="inline" data-method="scaleX" title="Flip horizontal">Flip horizontal</button>
            <button type="button" class="btn btn-primary" data-arguments="[-1]" data-enable="inline" data-method="scaleY" title="Flip vertical">Flip vertical</button>
          </div>
          <div class="btn-group d-flex" role="group">
            <button type="button" class="btn btn-primary" data-arguments="[-10,0]" data-enable="inline" data-method="move" title="Move left">Left</button>
            <button type="button" class="btn btn-primary" data-arguments="[10,0]" data-enable="inline" data-method="move" title="Move right">Right</button>
            <button type="button" class="btn btn-primary" data-arguments="[0,-10]" data-enable="inline" data-method="move" title="Move up">Up</button>
            <button type="button" class="btn btn-primary" data-arguments="[0,10]" data-enable="inline" data-method="move" title="Move down">Down</button>
          </div>
          <div class="btn-group d-flex" role="group">
            <button type="button" class="btn btn-primary" data-enable="inline" data-method="prev" title="View previous image">Prev</button>
            <button type="button" class="btn btn-primary" data-enable="inline" data-method="next" title="View next image">Next</button>
            <button type="button" class="btn btn-primary" data-enable="inline" data-method="play" title="Play the images">Play</button>
            <button type="button" class="btn btn-primary" data-enable="inline" data-method="stop" title="Stop the playing">Stop</button>
          </div>
          <div class="btn-group d-flex" role="group">
            <button type="button" class="btn btn-primary" data-enable="modal" data-method="show" title="Show the viewer">Show</button>
            <button type="button" class="btn btn-primary" data-method="hide" title="Hide the viewer" disabled>Hide</button>
            <button type="button" class="btn btn-primary" data-enable="inline" data-method="full" title="Enter modal mode">Full</button>
            <button type="button" class="btn btn-primary" data-method="exit" title="Exit modal mode" disabled>Exit</button>
          </div>
          <div class="btn-group d-flex" role="group">
            <button type="button" class="btn btn-primary" data-enable="inline" data-method="reset">Reset</button>
            <button type="button" class="btn btn-primary" data-enable="inline" data-method="tooltip">Tooltip</button>
          </div>
          <button type="button" class="btn btn-block btn-danger" data-enable="modal inline" data-method="destroy">Destroy</button>
        </div>
      </div>
    </div>
  </div>

  <!-- Footer -->
  <footer class="footer">
    <div class="container">
      <p class="heart"></p>
      <nav class="nav flex-wrap justify-content-center mb-3">
        <a class="nav-link" href="https://github.com/fengyuanchen/viewerjs">GitHub</a>
        <a class="nav-link" href="https://github.com/fengyuanchen/viewerjs/releases">Releases</a>
        <a class="nav-link" href="https://github.com/fengyuanchen/viewerjs/blob/master/LICENSE">License</a>
        <a class="nav-link" href="https://chenfengyuan.com/">About</a>
      </nav>
    </div>
  </footer>

  <!-- Scripts -->
  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
  <script src="https://fengyuanchen.github.io/shared/google-analytics.js" crossorigin="anonymous"></script>
  <script src="js/viewer.js"></script>
  <script src="js/main.js"></script>
</body>
</html>
